<template>
    <div>
      <h2>报名信息</h2>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/AdminMain/AdminHome">主页</el-breadcrumb-item>
        <el-breadcrumb-item to="/AdminMain/ClassManager">课程管理</el-breadcrumb-item>
        <el-breadcrumb-item>报名信息</el-breadcrumb-item>
      </el-breadcrumb>
  
      <el-card style="margin-top: 20px;">
        <template #header>
          <div class="card-header">
            <i class="el-icon-s-order" style="margin-right: 5px;"></i>课程详情
          </div>
        </template>
  
        <div v-if="classOrderList.length === 0">
          <el-empty description="暂无报名信息" />
        </div>
  
        <div v-else>
          <el-descriptions title="课程信息" :column="2" border>
            <el-descriptions-item label="课程编号">{{ classOrderList[0].classId }}</el-descriptions-item>
            <el-descriptions-item label="课程名称">{{ classOrderList[0].className }}</el-descriptions-item>
            <el-descriptions-item label="开课时间">{{ classOrderList[0].classBegin }}</el-descriptions-item>
          </el-descriptions>
  
          <el-table :data="classOrderList" style="width: 100%; margin-top: 20px;">
            <el-table-column prop="memberAccount" label="会员账号/卡号" />
            <el-table-column prop="memberName" label="会员姓名" />
          </el-table>
        </div>
  
        <div style="text-align:center; margin-top:20px;">
          <el-button type="primary" @click="goBack">返回</el-button>
        </div>
      </el-card>
    </div>
  </template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()
const classId = route.query.classId

const classOrderList = ref([])

onMounted(() => {
  if (!classId) {
    ElMessage.error('缺少课程编号')
    return
  }

  axios.get('/server/classOrder/findByClassId', {
    params: { classId }
  })
      .then(response => {
        if (response.data.code === 200) {
          classOrderList.value = [response.data.data]
        } else {
          ElMessage.error('获取报名信息失败：' + (response.data.message || '未知错误'))
        }
      })
      .catch(() => {
        ElMessage.error('网络请求失败')
      })
})

const goBack = () => {
  router.push('/AdminMain/ClassManager')
}
</script>

  
  <style scoped>
  .card-header {
    font-weight: bold;
    font-size: 16px;
  }
  </style>
  